function updateLine(data1,data2)
{
    var areaChartData = {
        labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
        datasets: [
          {
            label: "正向分类",
            backgroundColor: "rgba(60,141,188,0.9)",
            borderColor: "rgba(60,141,188,0.8)",
            pointRadius: false,
            pointColor: "#3b8bba",
            pointStrokeColor: "rgba(60,141,188,1)",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(60,141,188,1)",
            data: data1,
          },
          {
            label: "负向分类",
            backgroundColor: "rgba(210, 214, 222, 1)",
            borderColor: "rgba(210, 214, 222, 1)",
            pointRadius: false,
            pointColor: "rgba(210, 214, 222, 1)",
            pointStrokeColor: "#c1c7d1",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: data2,
          },
        ],
    };
    var areaChartOptions = {
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        display: true,
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false,
            },
          },
        ],
        yAxes: [
          {
            gridLines: {
              display: true,
            },
          },
        ],
      },
    };
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChartOptions = $.extend(true, {}, areaChartOptions);
    var lineChartData = $.extend(true, {}, areaChartData);
    lineChartData.datasets[0].fill = false;
    lineChartData.datasets[1].fill = false;
    lineChartOptions.datasetFill = false;
    new Chart(lineChartCanvas, {
      type: "line",
      data: lineChartData,
      options: lineChartOptions,
    });

};

function updatePie(labels,datas)
{
    var donutChartCanvas = $("#donutChart").get(0).getContext("2d");
    var donutData = {
      labels: labels,
      datasets: [
        {
          data: datas,
          backgroundColor: [
            "#f56954",
            "#00a65a",
            "#f39c12",
            "#00c0ef",
            "#3c8dbc",
            "#d2d6de",
          ],
        },
      ],
    };
    var donutOptions = {
      maintainAspectRatio: false,
      responsive: true,
    };

    new Chart(donutChartCanvas, {
      type: "doughnut",
      data: donutData,
      options: donutOptions,
    });
};

$(function () {
    /* ChartJS
     * -------
     * Here we will create a few charts using ChartJS
     */

    //--------------
    //- AREA CHART -
    //--------------

    // Get context with jQuery - using jQuery's .get() method.


    var areaChartData = {
      labels: ["1月", "2月", "3月", "4月", "5月", "6月", "7月"],
      datasets: [
        {
          label: "正向分类",
          backgroundColor: "rgba(60,141,188,0.9)",
          borderColor: "rgba(60,141,188,0.8)",
          pointRadius: false,
          pointColor: "#3b8bba",
          pointStrokeColor: "rgba(60,141,188,1)",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(60,141,188,1)",
          data: [28, 48, 40, 19, 86, 27, 90],
        },
        {
          label: "负向分类",
          backgroundColor: "rgba(210, 214, 222, 1)",
          borderColor: "rgba(210, 214, 222, 1)",
          pointRadius: false,
          pointColor: "rgba(210, 214, 222, 1)",
          pointStrokeColor: "#c1c7d1",
          pointHighlightFill: "#fff",
          pointHighlightStroke: "rgba(220,220,220,1)",
          data: [65, 59, 80, 81, 56, 55, 40],
        },
      ],
    };

    var areaChartOptions = {
      maintainAspectRatio: false,
      responsive: true,
      legend: {
        display: true,
      },
      scales: {
        xAxes: [
          {
            gridLines: {
              display: false,
            },
          },
        ],
        yAxes: [
          {
            gridLines: {
              display: true,
            },
          },
        ],
      },
    };

    //-------------
    //- 曲线图 -
    //--------------
    var lineChartCanvas = $("#lineChart").get(0).getContext("2d");
    var lineChartOptions = $.extend(true, {}, areaChartOptions);
    var lineChartData = $.extend(true, {}, areaChartData);
    lineChartData.datasets[0].fill = false;
    lineChartData.datasets[1].fill = false;
    lineChartOptions.datasetFill = false;

    new Chart(lineChartCanvas, {
      type: "line",
      data: lineChartData,
      options: lineChartOptions,
    });

    //-------------
    //- 饼图 -
    //-------------
    // Get context with jQuery - using jQuery's .get() method.
    // var donutChartCanvas = $("#donutChart").get(0).getContext("2d");
    // var donutData = {
    //   labels: ["色情", "暴力", "喜剧", "悲剧", "传销", "诈骗"],
    //   datasets: [
    //     {
    //       data: [700, 500, 400, 600, 300, 100],
    //       backgroundColor: [
    //         "#f56954",
    //         "#00a65a",
    //         "#f39c12",
    //         "#00c0ef",
    //         "#3c8dbc",
    //         "#d2d6de",
    //       ],
    //     },
    //   ],
    // };
    // var donutOptions = {
    //   maintainAspectRatio: false,
    //   responsive: true,
    // };

    // new Chart(donutChartCanvas, {
    //   type: "doughnut",
    //   data: donutData,
    //   options: donutOptions,
    // });
});


function setInnerHtml(datas){
  let fa = document.getElementById("list-group");
  // for 
  let l = 0;
  for(const key in datas)
  {
    let a = document.createElement('a');
    a.href = "#"+l;
    
    a.setAttribute("data-bs-toggle","collapse");
    a.role = "button";
    a.setAttribute("aria-expanded","false");
    a.setAttribute("aria-controls","collapseExample");
    a.setAttribute("class","list-group-item");
    // a.class = "list-group-item";
    a.addEventListener("click",function()
      {
          document.getElementById("imgss").setAttribute('src',key);
      }
    );
    let span = document.createElement('span');
    span.setAttribute("class","badge");
    span.innerText = datas[key].length;
    a.appendChild(span);
    let text = document.createTextNode(key);
    a.appendChild(text);
    fa.appendChild(a);
    let div1 = document.createElement('div');
    div1.setAttribute("class","collapse");
    div1.id = l;
    let div2 = document.createElement('div');
    div2.setAttribute("class","card card-body panel-body");
    let div3 = document.createElement('div');
    div3.setAttribute("class","col-sm-12");
    for(var idx=0;idx<datas[key].length;idx++)
    {
      UR = datas[key][idx][1];
      TT = datas[key][idx][0];
      let itema = document.createElement('a');
      itema.href=UR;
      itema.setAttribute("class","list-group-item");
      // itema.class="list-group-item"
      itema.innerText = TT;
      div3.appendChild(itema);
      div2.appendChild(div3);
      div1.appendChild(div2);
      fa.appendChild(div1);
    } 
    l++;
  }
};

window.onload = function() {
  let token = $('input[name=csrfmiddlewaretoken]').val();
  $.ajax({
      url: '/visual/',
      method: 'POST',
      dataType: 'json',
      data: {
            csrfmiddlewaretoken: token
      },
      success: function(response) {
          datas = $.parseJSON(response);
          let totL = 0,lenList = [],labList = [];
          for(key in datas)
          {
            labList.push(key); 
            lenList.push(datas[key].length);
            totL +=1;
          }
          updatePie(labList,lenList);
          setInnerHtml(datas);

      },
      error: function(xhr, status, error) {
        // 在这里处理错误
        console.log(error);
      }
  });
};